<div class="wrap">
					<div class="headings">
						<h1>
							<span>Experiment : </span><span>
								<select name="selectboxexp" id="selectbox" title="Select Experiment for detail">
                                   <%
                                    	model=JSON.parse(model); 
                                    	                             	
                                    	for(i=0;i<exps.length;i++)
                                    	{                                    		
                                    		if(exps[i].id===model.id)
                                    		{
                                    			%><option value="<%=model.id%>" selected><%=model.name%></option><%
                                    		}
                                    		else
                                    		{
                                    			%><option value="<%=exps[i].id%>"><%=exps[i].name%></option><%
                                    		}
                                    	}
                                    %>
                            	</select>
                            </span>
						</h1>
						<a class="newIm" href="experiments"><img src="../images/add.png" alt="Add New Project"></a>
					</div>				
					<div id="list-tabs">
						
								<ul class="tabs">
								    <li class="active"><a href="#tab1">Property Set</a></li>
								    <li><a href="#tab2">Virtual Node Group</a></li>
								    <li><a href="#tab3">Images</a></li>
								    <li><a href="#tab4">Virtual Tasks</a></li>
								</ul>
								
								<div class="tab_container">
								    <div id="tab1" class="tab_content" style="display: block; ">
								    	<div>
								    		<details class="exp-set">
								    		<summary><div class="headings"><h1><span>New PropertySet</span></h1></div></summary>		
											<form action="#" id="propertySetForm">
													<input type="hidden" value="New" name="formFun">
												<p>
						                            <label for="name">PropertySet Name</label>
						                            <input class="input-small" type="text" value="" name="name" id="name" placeholder="PropertySet Name">
						                        </p>
						                        <p>
						                            <label for="description">Propertyset Description</label>
						                            <textarea name="description" id="description" cols="60" rows="15" placeholder="Propertyset Description"></textarea>
						                        </p>
						                        <p>
						                            <label for="selectboxplat">Platforms </label>
						                            <select name="platform_id" id="selectboxplat">
						                                    	<% 
						                                    	
						                                    	
						                                    	for(i=0;i<platforms.length;i++)
						                                    	{                                    		
						                                    		if(platforms[i].id===model.id)
						                                    		{
						                                    			%><option value="<%=platforms[i].id%>" selected><%=platforms[i].name%></option><%
						                                    		}
						                                    		else
						                                    		{
						                                    			%><option value="<%=platforms[i].id%>"><%=platforms[i].name%></option><%
						                                    		}
						                                    	}
						                                    	
						                                    	
						                                    	  %>
						                                    	
						                            </select>
						                        </p><!--
						                        <div>
						                            <span class="main-label">Sensor(s):</span>						                            
						                            <table summary="sensors">						                           
						                            <tbody><tr><td><input type="checkbox" name="sensors" id="Temperature"><label for="Temperature">Temperature</label>
						                            </td><td><input type="checkbox" name="sensors" id="Humidity"><label for="Humidity">Humidity</label>
						                            </td></tr>
						                            <tr><td><input type="checkbox" name="sensors" id="Visible-light"><label for="Visible-light">Visible light</label>
						                            </td><td><input type="checkbox" name="sensors" id="IR-light"><label for="IR-light">IR light</label>
						                            </td></tr>
						                            <tr><td><input type="checkbox" name="sensors" id="Sound"><label for="Sound">Sound</label>
						                            </td><td><input type="checkbox" name="sensors" id="Ultrasound"><label for="Ultrasound">Ultrasound</label>
						                            </td></tr>
						                            <tr><td><input type="checkbox" name="sensors" id="Cameras"><label for="Cameras">Cameras</label>
						                            </td><td><input type="checkbox" name="sensors" id="GPS"><label for="GPS">GPS</label>
						                            </td></tr>
						                            </tbody></table>
						                        </div>
						                        <div>
						                            <span class="main-label">Actuator(s):</span>						                            
						                            <table summary="Actuators">
						                            <tbody><tr><td><input type="checkbox" name="actuators" id="window"><label for="window">Window</label>
						                            </td><td><input type="checkbox" name="actuators" id="LED"><label for="LED">LED</label>
						                            </td></tr>
						                            <tr><td><input type="checkbox" name="actuators" id="UltrasoundA"><label for="UltrasoundA">Ultrasound</label>
						                            </td><td><input type="checkbox" name="actuators" id="Position"><label for="Position">Position</label>
						                            </td></tr>
						                            </tbody></table>
						                        </div>-->
						                        <p>
						                            <label for="nodes">No of Nodes: <input type="text" id="rangeValue1" class="input-small" name="num_nodes" value="0" style="width:100px"/></label>
						                            <input id="slider1" name="nodes" type="range" min="0" max="200" value="0" onchange="printValue(this.value,'rangeValue1')">
						                        </p>
												 <p>
						                            <input class="button shadow-dark" name="submit" type="submit" value="Submit">
						                        </p>
											</form>	
											</details>		
								    	</div>
								    	
								    	
								    	
								        <table class="shadow-dark" id="psTable">
								        	<tbody>
								        	<tr><th>PropertySet Name</th><th class="edit-delete-box">Delete</th></tr>
    										<%
    											
    										  for(i=0;i<model.property_sets.length;i++)
    										{
    										 %><tr><td><%=model.property_sets[i].name%></td><td class="delete"><a href="<%=model.property_sets[i].uri %>" class="delete">Delete</a></td></tr><%
    										 	}
    										 %>
    																	    
								        	</tbody>
								        </table>
								    </div>
								    <!-- -->
								    <div id="tab2" class="tab_content" style="display: none; ">
								       
								       <div>
								    		<details class="exp-set">
								    		<summary><div class="headings"><h1><span>New VirtualNodeGroup</span></h1></div></summary>		
											<form action="#" id="virtualnodegroupform">
													<input type="hidden" value="New" name="formFun">
												 <p>
						                            <label for="name">VirtualNodeGroup Name</label>
						                            <input class="input-small" type="text" value="" name="name" id="name" placeholder="VirtualNodegroup Name">
						                        </p>
						                        <p>
						                            <label for="description">VirtualNodeGroupent Description</label>
						                            <textarea name="description" id="description" cols="60" rows="15" placeholder="VirtualNodegroup Description"></textarea>
						                        </p>
						                       <div id="virtual_node_container">
						                       <table style="width:80%;margin:0;">
						                       <tr><th>Virtual Nodes </th><th>Virtual Nodes In Group</th></tr>
						                       <tr><td>
							                       <ol id="selectable">
							                       
							                       	<%
							                        	for( i =0;i<model.virtual_node_count;i++)
							                        	{
							                        	
							                        	%>
							                        	<li class="ui-state-default" title="<%=model.virtual_nodes[i].id %>"><%=model.virtual_nodes[i].id %></li>
							                        	<%
							                        	}
							                        %>
							                       
													</ol>
												</td>
												<td>
													<ol id="selected">
													</ol>
													<div id="selectedForm"></div>
												</td>
												</tr>
						                       </table>
						                       <script>
						                       	$(function() {
												    $( "#selectable" ).selectable({
												    	
												    	selected: function( event, ui ) {
												    		//$("#selected").append(ui.selected.outerHTML);
												    	},
												    	stop:function(event, ui){
												    		$( "#selected" ).empty();
												    		$("#selectedForm").empty();
												    		$('#selectable li[class~="ui-selected"]').clone().appendTo("#selected");
												    		$('#selectable li[class~="ui-selected"]').each(function(){
												    			$('#selectedForm').append('<input type="checkbox" name="virtual_nodes[]" value="'+$(this).attr('title')+'" checked style="visibility:hidden;"/>');
												    			
												    		});
												    														    		
												    	}
												    	
												    	
												    	
												    });
												  });
						                       </script>
						                       </div>
											<p>
						                            <input class="button shadow-dark" name="submit" type="submit" value="Submit">
						                       </p>
											</form>	
											</details>		
								    	</div>
								       
								       
								       <table class="shadow-dark" id="VGNtable">
								        	<tbody><tr><th>Title</th><th>No. Node</th><th class="edit-delete-box">Delete</th></tr>
    										<%
    											
    										  for(i=0;i<model.virtual_node_groups.length;i++)
    										{
    										 %><tr><td><%=model.virtual_node_groups[i].name%></td><td ><%=model.virtual_node_groups[i].virtual_node_count%></td><td class="delete"><a href="<%=model.virtual_node_groups[i].uri %>" class="delete">Delete</a></td></tr><%
    										 	}
    										 %>							    
								        </tbody></table>
								    </div>
								    <div id="tab3" class="tab_content" style="display: none; ">
								       <div>
								    		<details class="exp-set">
								    		<summary><div class="headings"><h1><span>Install Image</span></h1></div></summary>		
											<form action="#" >
													<input type="hidden" value="New" name="formFun">
												<p>
						                            <label for="selectboxplat">Images </label>
						                            <select name="selectboxplat" id="selectboximg">
																<option value="Image1">Image1</option>
						                                    	<option value="Image2">Image2</option>
						                                    	<option value="Image3">Image3</option>
						                                    	<option value="Image4" selected="">Image4</option>
						                                    	<option value="Image5">Image5</option>
						                                    	<option value="Image6">Image6</option>
						                            </select>
						                        </p>
						                        <p>
						                            <input class="button shadow-dark" name="submit" type="submit" value="Install">
						                        </p>
											</form>	
											</details>		
								    	</div>
								    </div>
								    <div id="tab4" class="tab_content" style="display: none; ">
								    <details class="exp-set">
								    		<summary><div class="headings"><h1><span>New Virtual Task</span></h1></div></summary>		
											<form action="#" id="virtualtaskform">
													<input type="hidden" value="New" name="formFun">
												 <p>
						                            <label for="name">Virtual Task Name</label>
						                            <input class="input-small" type="text" value="" name="name" id="name" placeholder="Virtual Task Name">
						                        </p>
						                        <p>
						                            <label for="description">Virtual Task Description</label>
						                            <textarea name="description" id="description" cols="60" rows="15" placeholder="Virtual Task Description"></textarea>
						                        </p>
						                        <p>
						                            <label for="selectboxplat">Method </label>
						                            <select name="method" id="selectboxplat">
																<option value="PUT">PUT</option>						                                  
						                            </select>
						                        </p>
						                        <p>
						                            <label for="selectboxplat">Virtual Node Group </label>
						                            <select name="target" id="selectboxvgn">
											            <%
											            	
											            	for(var i=0;i<model.virtual_node_groups.length;i++){
											            		%>
											            		<option value="<%=model.virtual_node_groups[i].uri %>"><%=model.virtual_node_groups[i].name  %></option>
											            		<%
											            	}
											            %>			                                  
						                            </select>
						                        </p>
						                      
												<p>
						                            <input class="button shadow-dark" name="submit" type="submit" value="Submit">
						                       </p>
											</form>	
											</details>
								    
								    
								    
								       <table class="shadow-dark" id="virtualTaskTable">
								        	<tbody><tr><th>Title</th><th class="edit-delete-box">Delete</th></tr>
    										<%
    											
    										  for(i=0;i<model.virtual_tasks.length;i++)
    										{
    										 %><tr><td><%=model.virtual_tasks[i].name%></td><td class="delete" width="30%"><a href="<%=model.virtual_tasks[i].uri %>" class="delete">Delete</a></td></tr><%
    										 	}
    										 %>								    
								        </tbody></table>
								    </div>
								</div>
						
					</div>
				</div>